import { ref, onMounted, onUnmounted } from "vue";
import { useLayoutStore } from "@/store/modules/layout";

export function useResponsive() {
  const layoutStore = useLayoutStore();
  const isMobile = ref(false);

  const checkMobile = () => {
    const width = window.innerWidth;
    isMobile.value = width < 768;

    // 在移动端自动折叠菜单
    if (isMobile.value && !layoutStore.layout.collapsed) {
      layoutStore.toggleCollapsed();
    }
  };

  onMounted(() => {
    checkMobile();
    window.addEventListener("resize", checkMobile);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", checkMobile);
  });

  return {
    isMobile,
  };
}
